﻿@charset 'utf-8';

@function q($px) {
	@return ($px / 46.875)+rem;
}
//@import url(pop.scss);
html,body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	//font-size: 14px;
}
*{
	box-sizing: border-box;
}
.swiper-container,.swiper-wrapper {
	width: 100%;
	height: 100vh;
}
//.swiper-container {
//	visibility: hidden;
//}
.page{
	position: relative;
	padding-top: 1px;
	width: 100%;
	height: 100vh;
	background-repeat: repeat;
}
@for $i from 1 to 8 {

	.page0#{$i} {
		background-image: url("../img/page0#{$i}-bg-clip.jpg");
	}
}
.page01{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	.logo_line {
		 height: q(150);
		 height: 12.5vh;
		 flex-shrink:0;
	}
	.header_line {
		display: flex;
		flex-grow:2;
	}
	.footer_line {
		flex-shrink: 2;
		flex-grow:1;
	}
		.logo {
			position: relative;
			top: q(33);
			left: q(42);
			width: q(309);
			height: q(72);
			background:url(../img/logo.png) 0 0 /contain no-repeat;
		}
		.header {
			//position: relative;
			margin: auto;

			//top: 15.4vh;
			width: 74%;
			text-align: center;
			>img {
				//visibility: hidden;
				width: 100%;
			}
			//height: 70.3%;
			//background:url(img/page01-main.png) 0 0 /contain no-repeat;
		}
	.footer_line {
		display: flex;
		align-items: center;
		justify-content:space-between;
		width: 100%;
		.head {
			background:url(../img/hand-l.png) 0 0 /contain no-repeat;
			width: q(157);
			height: q(155);
			&.head_r {
				transform: scaleX(-1);
			}
		}
		.tit {
			width: q(238);
			height: q(280);
			background:url(../img/page01-txt.png) 0 0 /contain no-repeat;
		}
	}
}
.page02 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	.header {
		display: flex;
		text-align: center;
		max-height: q(660);
		max-height: 55vh;
		>img {
			position: relative;
			left: q(-28);
			margin: auto;
			width: 85.7%;
			max-height: q(660);
			max-height: 55vh;
		}

	}
	.content {
		width: 85.3%;
		flex-grow: 1;
		.box_btn {
			display: flex;
			flex-direction: column;
			align-items: left;
			min-height: q(385);
			.btn{
				//visibility: hidden;
					position: relative;
					height: q(54);
				margin-bottom: q(60);
				>img {
					width:q(335);
				}

				&.btn-1{
					left: q(145);
					>img {
						width: q(405);
					}
				}
				&.btn-2{
					left: q(57);
					>img {

					}
				}
				&.btn-3{
					left: q(111);
					>img {

					}}
				&.btn-4{
					left: q(192);
					>img {

					}
				}
			}
		}
		.box_pop {
			position: relative;
			padding-top: 1px;
			height: q(490);
			height: 40vh;
			background-color: #fff;
			border-radius: 3px;
			.tit{
				color: #0088ed;
				font-size:  q(42);
				text-align: center;
			}
			.txt {
				>span {
					display: inline-block;
					line-height: 1.5;
					text-indent: -1em;
					padding-left: 1em;
				}
			}
			.close_btn {
				top: q(40);
				right: q(35);
				width: q(40);
				height: q(40);
				position: absolute;
			}
			.close_btn:before, .close_btn:after {
				content: '';
				position: absolute;
				top: 50%;
				width: q(40);
				height: 2px;
				background-color: #888;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			.close_btn:after {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
			.txt_wrapper {
				overflow-y: auto;
				width: 90%;
				height: q(330);
				height: 27.5vh;
				margin: 0 auto;
			}
			.txt {
				margin-top: 0;
				font-size: q(30);
				color: #333;
			}
		}

	}


}

.page03 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	.header {
		text-align: center;
		>img {
			width: 93%;
		}
	}
	.content {
		flex-grow: 2;
		flex-shrink: 2;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 10px;

		.tip1 {
			width: q(324);
			visibility: hidden;
		}
		.tip2 {
			width: q(255);
			visibility: hidden;
		}
		.tip3 {
			width: q(215);
			visibility: hidden;
		}
		.tip4 {
			width: q(469);
			visibility: hidden;
		}
		.tip5 {
			width: q(318);
			visibility: hidden;
		}
		.tip {
			visibility: hidden;
			>img {
				width: 100%;
			}
		}
 	}
	.footer {
		flex-shrink: 0;
		.tip-last{
			width: q(430);
			position: absolute;
			left: 50%;
			margin-left: q(-215);
			//transform: translateX(-50%);
		}
		.img-l {
			width: 69%;
		}
		.img-r {
			position: absolute;
			width: q(162);
			bottom: q(166);
			right: q(90);
		}
	}
}

.page04 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	.content {
		padding-top: q(76);
		display: flex;
		flex-grow: 2;

		.l {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-end;
			border-right: 1px dashed #fff;
			.box {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				margin: 0 q(30) q(165.6) 0;
				margin: 0 q(30) 13.8vh 0;
				.tit {
					height: q(62);
					margin-bottom: q(27);
					> img {
						width: 100%;
					}
					&.tit-1 {
						width: q(219)
					}
					&.tit-2 {
						width: q(279)
					}
				}
				.txt {
					> img {
						width: 100%;
					}
					&.txt-1 {
						width: q(313)
					}
					&.txt-2 {
						width: q(261)
					}
				}
			}
		}
		.r {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			.box {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin:   q(165.5)  0 q(65) q(30);
				margin:   13.8vh  0 q(65) q(30);
				.tit {
					height: q(62);
					margin-bottom: q(27);
					> img {
						width: 100%;
					}
					&.tit-1 {
						width: q(279)
					}
					&.tit-2 {
						width: q(279)
					}
				}
				.txt {
					> img {
						width: 100%;
					}
					&.txt-1 {
						width: q(297)
					}
					&.txt-2 {
						width: q(184)
					}
				}
			}
		}
	}
	.footer {
		position: relative;
		text-align: center;
		padding-bottom: q(26);
		>img {
			position: relative;
			height: q(314);
		}
		&::before {
			content:'';
			position: absolute;
			width: q(1000);
			height: q(1000);
			top: q(110);
			//top: q(-200);
			border-radius: 50%;
			left: 50%;
			transform: translateX(-50%);
			background-color: #ef6458;
		}
	}
}
.page05 {
	position: relative;
	background-image: url('../img/page05-bg-all.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;background-size: cover;
	.content {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		padding-top: q(100);
		margin-bottom: q(270);
		margin-bottom: 22.5vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		.box {
			display: flex;
			&.box-1, &.box-3 {
				margin: 0 q(40);
				justify-content: space-between;
				>img {
					width: q(251);
					height: q(251);
				}
			}
			&.box-2{
				flex-grow: 2;
				justify-content: center;
				align-items: center;
				>img {
					width: q(354);
					margin: 0;

				}
			}
		}
	}
}

.page06 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	//padding-top: q(70);
	.content {

		.box-1 {
			position: relative;
			display: flex;
			flex-grow: 2;
			align-items: center;
			justify-content: center;
			margin-bottom: q(50.4);
			margin-bottom: 4.2vh;
			.rowbox {
				width: q(609);
			}
			.inner {
				position: absolute;
				top: 55%;
				left: 50%;
				width: q(340);
				transform: translate(-50%,-50%);
			}
		}
		.box-2 {
			flex-shrink: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			>img {
				margin-bottom: q(26);
				margin-bottom: 2.17vh;
			}
			.img-wechat {
				width: q(259);
			}
			.img-txt01 {
				width: q(300);
			}
			.img-txt02 {
				width: q(542);
			}
		}
	}
}

.page07 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	padding-top: q(100);
	padding-top: 8.3vh;
	background-image: url('../img/page07-bg-all.jpg');
	background-repeat: no-repeat;
	-webkit-background-size: cover;background-size: cover;
	.box-1 {
		>img {
			display: block;
			margin-left: q(86);
			width: q(569);
		}
	}
	.box-2 {
		//flex-grow: 2;
		flex-shrink: 2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		padding: q(20) q(55);
		min-height: 10rem;
		.tip {
			height: q(80);
			width: 100%;
			border-radius: q(40);
			margin: q(15) 0;
			flex-shrink: 0;
			&.btn {
				border: 1px solid #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				>img {
					width: q(179);
				}
			}
		}
		input.tip {
			background-color: #fff;
			color: #000;
			line-height: q(80);
			padding-left: 2em;
			font-size: q(30);
			-webkit-appearance: none;
			outline: none;
			border: none;
		}
	}
	.box-3 {
		display: flex;
		justify-content: flex-end;
		min-height: q(257);
		>img {
			flex-shrink: 0;
			width: q(226);
			height: q(257);
			margin-right: q(46);
		}
	}
}

.load-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #fff;
	z-index: 10;
	.load-img {
		position: relative;
		top: q(320);
		left: 50%;
		transform: translateX(-50%);
		width: q(250);
		height: q(250);

	}
	//.object {
	//	width: q(30);
	//	height: q(30);
	//	background-color: #FFF;
	//	float: left;
	//	margin-right: q(20);
	//	margin-top: q(65);
	//	border-radius: 50% 50% 50% 50%;
	//}
}
//#loading-center-absolute {
//	position: absolute;
//	left: 50%;
//	top: 50%;
//	height: q(150);
//	width: q(150);
//	transform: translate(-50%,-50%);
//}

.icon-audio {
	position: fixed;
	right: q(15);
	top: q(15);
	width: q(64);
	height: q(64);
	background-image: url('../img/audio.png');
	-webkit-background-size: contain;background-size: contain;
	z-index: 5;
  .audioBtn {
	  border: 0;
	  outline: 0;
	  -webkit-appearance: none;
	  opacity: 0;
	  display: block;
	  width: 100%;
	  height: 100%;
  }
}

@import 'animationPage';
